<template>
  <div>
<!--    <el-form-->
<!--      ref="editForm"-->
<!--      :inline="true"-->
<!--      :model="editForm">-->
<!--      <el-form-item prop="templateId" label="模版" :rules="[{ required: true, message: '请选择模版', trigger: 'blur' }]">-->
<!--        <el-select clearable v-model="editForm.templateId" placeholder="请选择模版" >-->
<!--          <el-option-->
<!--            v-for="item in selectData"-->
<!--            :key="item.value"-->
<!--            :label="item.label"-->
<!--            :value="item.value">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="表头"-->
<!--                    prop="templateTitle"-->
<!--                    :rules="[{ required: true, message: '请输入表头', trigger: 'blur' }]">-->
<!--        <el-input placeholder="请输入表头" v-model="editForm.templateTitle"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="打印份数"-->
<!--                    prop="printNumber"-->
<!--                    :rules="[{required: true, message:'请输入打印份数', trigger:'blur'}]">-->
<!--        <el-input-number v-model="editForm.printNumber" :min="0" controls-position="right" size="mini"  :step="1" ></el-input-number>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button type="primary" @click="doSubmit">保存</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
    <section  class="add-btn">
      <el-button type="primary" @click="edit('add')" v-if="!noShow">新增</el-button>
    </section>
    <el-table
      size="mini"
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      border
      :header-cell-style="{
        'background-color': '#eeeeee !important',
      }"
      :row-class-name="tableRowClassName"
    >
      <el-table-column type="index" label="序号" width="60" align="center">
        <template slot-scope="scope">
          <span>{{
              (page.pageNo - 1) * page.pageSize + scope.$index + 1
            }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="模版类型"
        prop="templateType"
        :show-overflow-tooltip="true"
      >
          <template slot-scope="scope">
              {{$dictUtils.getDictLabel("templateType", scope.row.templateType, "--")}}
          </template>

      </el-table-column>
        <el-table-column
        label="模版"
        prop="templateName"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        label="表头"
        prop="templateTitle"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        label="打印份数"
        prop="printNumber"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
        <el-table-column prop="state" label="状态" width="110">
            <template slot-scope="scope">
                <section class="activate-state" v-if="scope.row.state===1">
                    <i></i>
                    {{$dictUtils.getDictLabel("state", scope.row.state, "")}}
                </section>
                <section class="inactive-state" v-else>
                    <i></i>
                    {{$dictUtils.getDictLabel("state", scope.row.state, "")}}
                </section>
            </template>
        </el-table-column>
      <el-table-column prop="address" label="操作" width="160px" v-if="!noShow">
        <template slot-scope="scope">
            <template v-for="item in $dictUtils.getDictList('state')">
                <el-link type="primary" v-if="item.value !=='-1'&& item.value!==(scope.row.state+'')" :underline="false" @click="editState(item.value, scope.row)"  :disabled="(scope.row.state===-1&& item.value==='0')||item.value==scope.row.state"
                >{{item.label}}
                </el-link>
            </template>

            <el-link
            v-if="hasPermission('busin:weight:edit')"
            type="primary"
            :underline="false"
            @click="edit('edit',scope.row)"
          >修改</el-link
          >
          <el-link
            v-if="hasPermission('busin:weight:del')"
            type="primary"
            :underline="false"
            @click="del(scope.row.id)"
          >删除</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="page.pageSize"
      :current-page="page.pageNo"
      layout="total,prev,pager, next"
      :total="page.total"
    >
    </el-pagination>
    <el-dialog
      :title="title"
      :visible.sync="innerVisible"
      class="addForm-wrapper"
      :close-on-click-modal="false"
      append-to-body>

      <el-form
        ref="editForm"
        class="weightForm"
        label-width="93px"
        :model="editForm">
          <el-form-item label="类型:" prop="templateType"
                        :rules="[{ required: true, message: '请选择模版类型', trigger: 'blur' }]">
              <el-radio-group v-model="editForm.templateType">
                  <el-radio v-for="item in $dictUtils.getDictList('templateType')"
                            :label="item.value"
                            >{{item.label}}</el-radio>
              </el-radio-group>
          </el-form-item>
        <el-form-item label="模版:" prop="templateId"
                      :rules="[{ required: true, message: '请选择模版', trigger: 'blur' }]">
          <el-select clearable v-model="editForm.templateId" placeholder="请选择" style="width: 320px;">
            <el-option
              v-for="item in selectData"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="表头:"
                      prop="templateTitle"
                      :rules="[{ required: true, message: '请输入表头', trigger: 'blur' }]">
          <el-input placeholder="请输入表头" v-model="editForm.templateTitle"></el-input>
        </el-form-item>
        <el-form-item label="打印份数:" prop="printNumber"
                      :rules="[{ required: true, message: '请选择模版', trigger: 'blur' }]">
          <el-input-number v-model="editForm.printNumber" :min="0" controls-position="right" size="mini"  :step="1" ></el-input-number>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick
        >确定</el-button
        >
        <el-button size="small" @click="close()">取消</el-button>
      </span>
    </el-dialog>
  </div>


</template>
<script>
  import {getWeightTemplateSelectData, saveWeightTemplate, getWeightTemplateList, updateWeightTemplateState, deleteWeightTemplate, getWeightTemplateInfo, getModelWeightTemplateData} from '@/api/business/business.js'

export default {
  components: {
  },
  data () {
    return {
      noShow:false,
      dynamicValidateForm: {
        domains: [{
          value: ''
        }],
        email: '',
        businessId: '',
        templateId: '',
        templateTitle: '',
        printNumber: ''

      },
      innerVisible: false,
      loading: false,
      title: '',
      businessId: '',
      modelId: '',
      page: {
        pageSize: 10,
        pageNo: 1,
        total: 0
      },
      tableData: [],
      selectData: [],
      editForm: {
        businessId: '',
          templateType: '',
        templateId: '',
        templateTitle: '',
        printNumber: ''
      }
    }
  },
  methods: {
    edit (method, editForm) {
      this.getSelectList(this.businessId)
      if (method === 'add') {
          this.title = '新增磅单设置'
        // this.editForm = {}
        getModelWeightTemplateData({
          modelId: this.modelId
        }).then((res) => {
          if (res.data.code === '200') {
            this.editForm = res.data.result
          }
        })
        this.innerVisible = true
      } else if (method === 'edit') {
        getWeightTemplateInfo({id: editForm.id}).then((res) => {
          if (res.data.code === '200') {
            this.innerVisible = true
            this.$nextTick(() => {
              this.editForm = {}
              this.editForm.id = res.data.result.id
              this.editForm.businessId = res.data.result.businessId
              this.editForm.templateId = res.data.result.templateId
              this.editForm.templateTitle = res.data.result.templateTitle
              this.editForm.printNumber = res.data.result.printNumber
            })
            this.title = '修改磅单设置'
          } else {
            this.$message({
              type: 'error',
              message: res.data.message
            })
          }
        })
      }
    },
    // 删除磅单模版
    del (id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((res) => {
        deleteWeightTemplate({id: id}).then((res) => {
          if (res.data.code === '200') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList(this.businessId)
          }
        })
      })
    },
    // 改变磅单模版状态
    editState (event, row) {
      updateWeightTemplateState({ id: row.id, state: event }).then((res) => {
        if (res.data.code === '200') {
          this.getList(this.businessId)
          this.$message({
            type: 'success',
            message: '状态修改成功'
          })
        }
      })
    },
    // 获取磅单模版下拉列表数据
    getSelectList (businessId) {
      this.businessId = businessId
      getWeightTemplateSelectData({
      }).then((res) => {
        if (res.data.code === '200') {
          this.selectData = res.data.result
        }
      })
    },
    // 获取磅单模版下拉列表数据
    getList (businessId, modelId) {
      this.businessId = businessId
      this.modelId = modelId
      this.loading = true
      getWeightTemplateList({
        businessId: businessId,
          pageSize: this.page.pageSize,
          pageNo: this.page.pageNo
      }).then((res) => {
        if (res.data.code === '200') {
            this.tableData = res.data.result.list;
            this.page.total = res.data.result.count
        }
        this.loading = false
      })
    },
    // 新增调量
    doSubmit () {
      if (this.businessId) {
          this.$refs['editForm'].validate((valid) => {
            if (valid) {
              this.$set(this.editForm, 'businessId', this.businessId)
              saveWeightTemplate(this.editForm).then((res) => {
                if (res.data.code === '200') {
                  this.$message({
                    message: '成功',
                    type: 'success'
                  })
                this.innerVisible = false
                  this.$emit('refreshDataList')
                  this.getList(this.businessId)
                } else {
                  this.$message({
                    message: res.data.message,
                    type: 'error'
                  })
                }
              })
            }
          })
      } else {
        this.$notify.error({
          title: '错误',
          message: '请选择单条业务数据'
        })
      }
    },
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    },
    close () {
      this.innerVisible = false
    },
    handleSizeChange (e) {
      this.page.pageSize = e
      this.getList(this.businessId, this.modelId)
    },
    handleCurrentChange (e) {
      this.page.pageNo = e
      this.getList(this.businessId, this.modelId)
    }
  },

  mounted () {

  }
}
</script>
<style lang="scss" scoped>
    .addForm-wrapper{
        ::v-deep .el-dialog{
            .el-form{
                .el-radio__label{
                    font-size: 16px;
                }
                .el-radio__input{
                    position: relative;
                    top: -1px;
                }
            }
        }
    }
</style>
